<template>
  <div>
    <div class="test">
    <LuckyWheel
      ref="myLucky"
      class="test-myLucky"
      :width="width"
      :height="width"
      :blocks="blocks"
      :prizes="prizes"
      @end="endCallback"
    />
  <div class="startbtn" @click="startCallback"></div>
  </div>
  </div>
</template>
<script>
export default{
  created(){
    this.blocks = [{
      padding: '0.46rem',
      imgs:[{
        src:'https://img.iwave.net.cn/jeep/51c95637a377c3a12d09abe8b0f975e6.png',
        width: this.width,
        height: this.width,
        rotate: true
      }] 
    }]
    const prizes = [
      {
        id: 1,
        icon: "https://img.iwave.net.cn/bmw/a6b978fd0064a45ebcd6b649d49714ea.png",
        title: "再抽一次"
      },
      {
          id: 2,
          icon: "https://img.iwave.net.cn/bmw/7cffe2c789279a83ef577283535a2c1b.png",
          title: "10元红包"
      },
      {
          id: 3,
          icon: "https://img.iwave.net.cn/bmw/a3731dd942951974b9be1da171735d82.png",
          title: "谢谢参与"
      },
      {
          id: 4,
          icon: "https://img.iwave.net.cn/bmw/873a940855c837b4d6622fe8da442b8b.png",
          title: "20元红包"
      },
      {
          id: 5,
          icon: "https://img.iwave.net.cn/bmw/a6b978fd0064a45ebcd6b649d49714ea.png",
          title: "50元红包"
      },
      {
          id: 6,
          icon: "https://img.iwave.net.cn/bmw/7cffe2c789279a83ef577283535a2c1b.png",
          title: "10元红包"
      },
      {
          id: 7,
          icon: "https://img.iwave.net.cn/bmw/873a940855c837b4d6622fe8da442b8b.png",
          title: "30元红包"
      },
      {
          id: 8,
          icon: "https://img.iwave.net.cn/bmw/a3731dd942951974b9be1da171735d82.png",
          title: "谢谢参与"
      }
    ]
    this.prizes = prizes.map(item=>({
      fonts: [{text: item.title, top: '15rem', fontColor: '#FF7002', fontSize: '0.8rem', fontWeight: 600, wordWrap: false, lineHeight: '0.613rem'}],
      imgs: [{src: item.icon, top: '1.38rem', width: '2.rem', height: '2.5rem' }]
    }))
  },
methods:{
  startCallback () {
    console.log('#@@@@@')
    // 调用抽奖组件的play方法开始游戏
    this.$refs.myLucky.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
      // 假设后端返回的中奖索引是0
      var  index = 1
      //  1   4   6
      var num=Math.floor(Math.random()*100)
      console.log(num)
      if(num>=0 && num <=50){
      index= 1
      }else if(num>50 && num>=75 ){
        index= 4
      }else{
        index= 6
      }
      // 0、 50元  1、10元  2、30元   3、谢谢惠顾   4、再来一次   5、10元   6、谢谢惠顾  7、20元  

      // 调用stop停止旋转并传递中奖索引
      this.active_num=index
      this.$refs.myLucky.stop(index)
    }, 3000)
  },
  // 抽奖结束会触发end回调
  endCallback (prize) {
    console.log(prize)
    var text = this.active_num==1 ? '恭喜中奖10元红包':this.active_num==4 ?'恭喜抽中再来一次':this.active_num==6?'谢谢参与，再接再厉!':'谢谢参与，再接再厉!'
    alert(text)
  },
},
  computed:{
    width(){
      return '21rem'
      // return '9.2rem'
    }
  },
  data() {
    return {
      active_num: 1,
    };
  },
}
</script>
<style lang="less" scoped>
// @keyframes rotato{
//   0%{
//     transform: rotate(0deg);
//   }
//   100%{
//     transform: rotate(360deg);
//   }
// }
.test{
  position: relative;
  &-myLucky{
    margin: auto;
    animation: rotato 20s linear infinite forwards;
  }
  
}
.startbtn{
    position: absolute;
    background: url('https://img.iwave.net.cn/jeep/8e38bb871f79ef8950da8697603cde94.png');
    width: 114px;
    height: 114px;
    background-size: 100%;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    z-index: 100;
  }
</style>
